<template>
  <div>
    <h1>视频合并工具</h1>
    <input type="file" multiple @change="handleFiles" accept="video/*" />
    <button @click="mergeVideos" :disabled="isProcessing">
      {{ isProcessing ? '处理中...' : '合并视频' }}
    </button>
    <div v-if="mergedVideoUrl">
      <h3>合并后的视频：</h3>
      <video controls :src="mergedVideoUrl" width="400"></video>
      <a :href="mergedVideoUrl" download="merged-video.mp4">下载视频</a>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import * as FFmpeg from '@ffmpeg/ffmpeg';
console.log('FFmpeg->', FFmpeg);

const ffmpeg = FFmpeg.createFFmpeg({ log: true });

const videoFiles = ref([]);
const isProcessing = ref(false);
const mergedVideoUrl = ref('');

// 处理文件选择
function handleFiles (event) {
  videoFiles.value = Array.from(event.target.files);
  console.log('videoFiles->', videoFiles.value);
}

// 合并视频
async function mergeVideos () {
  if (videoFiles.value.length < 2) {
    alert('请选择至少两个视频进行合并！');
    return;
  }

  isProcessing.value = true;
  if (!ffmpeg.isLoaded()) {
    await ffmpeg.load();
  }

  // 将视频文件写入 FFmpeg 内存
  for (let i = 0; i < videoFiles.value.length; i++) {
    ffmpeg.FS('writeFile', `input${i}.mp4`, await FFmpeg.fetchFile(videoFiles.value[i]));
  }

  // 创建一个视频列表文件
  const fileList = videoFiles.value
    .map((_, i) => `file 'input${i}.mp4'`)
    .join('\n');
  ffmpeg.FS('writeFile', 'filelist.txt', fileList);

  // 执行 FFmpeg 合并视频
  await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'filelist.txt', '-c', 'copy', 'output.mp4');

  // 获取合并后的视频文件
  const data = ffmpeg.FS('readFile', 'output.mp4');

  mergedVideoUrl.value = URL.createObjectURL(
    new Blob([data.buffer], { type: 'video/mp4' })
  );
  isProcessing.value = false;
}
</script>

<style scoped>
h1 {
  font-size: 24px;
}

input {
  margin-bottom: 10px;
}

button {
  margin: 10px 0;
}

video {
  margin-top: 10px;
}
</style>
